<template>
  <view class="my">
    <div class="my-synopsis">
      <div class="my-synopsis-head">
        <view class="example-body custom-image-box">
          <uni-file-picker
            limit="1"
            :del-icon="false"
            disable-preview
            :imageStyles="{
              width: 75,
              height: 75,
              border: {
                radius: '50%',
              },
            }"
            file-mediatype="image"
            >选择</uni-file-picker
          >
        </view>
      </div>
      <div class="my-synopsis-name">
        <div style="margin-bottom: 10rpx; color: #fff; font-weight: 700">
          茅台当奶茶喝
        </div>
        <div style="color: #fff">152****4675</div>
      </div>
      <navigator url="/subpkg/Personal/Personal">
        <div class="my-head-set">
          <uni-icons type="gear" size="30"></uni-icons>
        </div>
      </navigator>
    </div>
    <div class="my-list">
      <navigator class="my-list-function" url="/subpkg/MyOrder/MyOrder">
        <div class="my-list-icon">
          <uni-icons type="shop" size="30"></uni-icons>
          <div>我的订单</div>
        </div>
        <div class="my-list-forward">
          <uni-icons type="forward" size="20"></uni-icons>
        </div>
      </navigator>
      <navigator class="my-list-function" url="/subpkg/MyVehicle/MyVehicle">
        <div class="my-list-icon">
          <uni-icons
            custom-prefix="automobile"
            type="icon-automobile-copy"
            size="25"
          ></uni-icons>
          <div>我的车辆</div>
        </div>
        <div class="my-list-forward">
          <uni-icons type="forward" size="20"></uni-icons>
        </div>
      </navigator>
      <navigator class="my-list-function" url="/subpkg/MyFavorite/MyFavorite">
        <div class="my-list-icon">
          <uni-icons type="star" size="30"></uni-icons>
          <div>我的收藏</div>
        </div>
        <div class="my-list-forward">
          <uni-icons type="forward" size="20"></uni-icons>
        </div>
      </navigator>
      <navigator class="my-list-function" url="/subpkg/Relation/Relation">
        <div class="my-list-icon">
          <uni-icons type="person" size="30"></uni-icons>
          <div>联系客服</div>
        </div>
        <div class="my-list-forward">
          <uni-icons type="forward" size="20"></uni-icons>
        </div>
      </navigator>
      <navigator
        class="my-list-function"
        url="/subpkg/UserAgreement/UserAgreement"
      >
        <div class="my-list-icon">
          <uni-icons type="wallet" size="30"></uni-icons>
          <div>用户协议</div>
        </div>
        <div class="my-list-forward">
          <uni-icons type="forward" size="20"></uni-icons>
        </div>
      </navigator>
    </div>
  </view>
</template>
<script setup lang="ts"></script>
<style lang="less">
.my {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(#3c7cf1, #e0e7f0);
  .my-synopsis {
    height: 350rpx;
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    margin-right: 20rpx;

    .my-synopsis-head {
      margin-right: 20rpx;
      border-radius: 50%;
      border: 8rpx solid #fff;

      .custom-image-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }
    .my-synopsis-name {
      margin-right: 300rpx;
    }
  }
  .my-list {
    display: flex;
    flex-direction: column;
    border-radius: 30rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    background-color: #fff;
    .my-list-function {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 10rpx;
      padding-right: 15rpx;
      .my-list-icon {
        display: flex;
        align-items: center;
        view {
          font-size: 28rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>
